<template>
     <el-table
     :fit= 'true'
    :size="getBaseTable.size"
    :data="getTableData"
    :stripe="getBaseTable.stripe"
    :border="getBaseTable.border"
    :cell-style="cellStyle"
    :header-cell-style = "headerStyle"
    v-bind:style="{ width: '100%' }">
    <el-table-column v-for="( item, i) in getHeader"
      :min-width = item[0]
      :key = i
      :prop="'C' + i"
      :label="item[1]">
    </el-table-column>
  </el-table>
</template>
<script>
function transpose (arr) {
  var newArray = arr[0].map((col, i) => {
        return arr.map((row) => {
        return row[i]
        })
        })
  return newArray
}
export default {
  props: ['getDetail'],
  methods: {
    headerStyle () {
        return 'background-color:' + this.getDetail.baseTable.headerColor + ';text-align:' + this.getDetail.baseTable.align
    },
    cellStyle () {
        return 'text-align:' + this.getDetail.baseTable.align + ';background-color: rgba(1,1,1,0)'
    }
  },
  computed: {
    getBaseTable () {
      return this.getDetail.baseTable
    },
    getHeader () {
      var header1 = [this.getDetail.sheetData[0], this.getDetail.sheetData[1]]
      var header2 = transpose(header1)
      return header2
    },
    getTableData () {
      var nc = this.getDetail.nc
      var data = this.getDetail.sheetData.map(item => {
          var dataItem = {}
          for (let i = 0; i < nc; i++) {
              dataItem['C' + i] = item[i]
          }
          return dataItem
          })
      data.shift()
      data.shift()
      return data
    }
  }
}
</script>
<style>
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
el-table th,
.el-table tr,
.el-table td {
  background-color: transparent !important;
}
.el-table tbody tr:hover>td {
  background-color: #91b5c65b !important
}
.el-table__row--striped td {
  background-color: #89abc949 !important
}
.el-table__row:not(.el-table__row--striped) {
  background: #8bb3c61c !important;
}
.el-table th.gutter{
display: table-cell!important;
}
</style>
